$(function() 
{
	$(this).bind("contextmenu", function(e) 
	{
       e.preventDefault();
    });
	getData();
});

function update(id,event)
		{
			if(event.keyCode==13)//เมื่อกด Enter
			{
				if($('#txtvalue'+id+'').val()==='')
				{
					event.preventDefault();
					$('#dialog').html('please input bookTitle')

					$('#dialog').dialog({
						'title':'Error',
						draggable: false
						});
					$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
					
				}
				else if ($('#txtath'+id+'').val()==='')
				{
					event.preventDefault();
					$('#dialog').html('please input author')
					$('#dialog').dialog({
						'title':'Error',
						draggable: false
						});
					$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
				}
				else 
				{
					$.get('update.php',
					{
						
						'bookTitle':$('#txtvalue'+id).val(),
						'author':$('#txtath'+id).val(),
						'id':id
					},function(data)
					{
						$('#value'+id).html($('#txtvalue'+id).val());
						$('#ath'+id).html($('#txtath'+id).val());
						$('#editimg'+id).show();
						
						$('#dialog').html('Update data complete');
						$('#dialog').dialog({
						'title':'complete',
						draggable: false
						});
						$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
						//alert(data);
					});
				}
						
			}
			//alert(id+'@'+event.keyCode);
		}
				
function editdata(id)
		{
			$('#editimg'+id).hide();
			//alert(id);
			$('#value'+id).html
			('<input id = "txtvalue'+id+'" type="text" onkeydown="update('+id+',event);" value="'+$('#value'+id).html()+'">');
			$('#ath'+id).html
			('<input id = "txtath'+id+'" type="text" onkeydown="update('+id+',event);" value="'+$('#ath'+id).html()+'">');
		}


function deldata(id)
	
	{
		$.get('delete.php',{'id' : id }, function(data)
		{
			  		$('#dialog').html(data)
					$('#dialog').dialog({
					'title':'complete',
					draggable: false
					});
					$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
					$('#data'+id).hide();

		});
	}


function getData()
{
	
	$('#booklist').html('<img src="icon/loading.gif">');
	
	$.getJSON('json.php',function(data)
	{
		
		$('#booklist').html('');
	///alert(data[2]['bookTitle']);
	$.each(data,function(key,val){
		$('#booklist').html(
		 $('#booklist').html()
				+'<tr id="data'+val['id']+'">'
					+'<td width="15" align="left">'+"<font color=#FF3333>" 
						+'<div id="data'+val['id']+'">'+val['id']+'. '+ "</font>"
					+'</td>'
					+'<td width="90" align="right">'
						+[" Book Name:"]
					+'</td>'
					+'<td width="120" align="left">'
						+"<font color=#rrggbb>"
						+'<span id="value'+val['id']+'"> '+val['bookTitle']+ "</font>"+' </span> '
					+'</td>'
					+'<td width="50" align="left">'
						+ ["Author:"]
					+'</td>'
					+'<td width="120" align="left">'
						+"<font color=#rrggbb>" 
						+'<span id="ath'+val['id']+'">'+val['author']+ "</font>"+'</span> '
					+'</td>'
					+'<td width="10" align="left">'
						+'<img id="editimg'+val['id']
						+'"src="icon/edit.png" onclick="editdata('+val['id']+');">'
					+'</td>'
					+'<td width="10" align="left">'
						+'<img src="icon/delete.png" onclick="deldata('+val['id']+');">'
					+'</td>'
						+'<br>'
					+'</div>'
				+'</tr>'
							);
			//alert(val['bookTitle']);
		});
	});
}

function submits()
{	

			if($('#bookTitle').val()=='')
			{
				$('#dialog').html('please input bookTitle')
				
				$('#dialog').dialog({
					'title':'Error',
					draggable: false
					});
				$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
			}
			else if ($('#author').val()=='')
			{
				$('#dialog').html('please input author')
				
				$('#dialog').dialog({
					'title':'Error',
					draggable: false
					});
				$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
			}
			else
			{	
				$.get('response.php',{'bookTitle' : $('#bookTitle').val(),'author':$('#author').val()},function(data)
					{
			  			$('#dialog').html(data)
						$('#dialog').dialog({
					'title':'complete',
					draggable: false
					});
						$( "#dialog" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
						getData();
					});
						
						$('#bookTitle').val('');
						$('#author').val('');
			}	
}